<template>
 <view class="edit-data">
    <uni-list class="user-edit" :border="false">
      <uni-list-item title="昵称" showArrow clickable @click="editNickname('nickname')" :rightText="userInfo.nickname">
        <template #footer>
          <view class="lext-ftsj" style="text-align: right;">
            {{ userInfo.nickname }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="性别" showArrow clickable @click="editSex" :rightText="(userInfo.sex === 1 ? '男' : (userInfo.sex === 2 ? '女' : ''))">
	  </uni-list-item>
	  <uni-list-item title="学历" showArrow clickable @click="editStudy" :rightText="xueli">
	  </uni-list-item>
	  <uni-list-item title="身高" showArrow clickable @click="editHome('high')" :rightText="userInfo.high">
	  </uni-list-item>
	  <uni-list-item title="年薪" showArrow clickable @click="editHome('salary')" :rightText="userInfo.salary">
	  </uni-list-item>
	  <uni-list-item title="家乡" showArrow clickable @click="editHome('home')" :rightText="userInfo.home">
	  </uni-list-item>
	  <uni-list-item title="工作单位" showArrow clickable @click="editHome('unit')" :rightText="userInfo.unit">
	  </uni-list-item>
	  <uni-list-item title="工作性质" showArrow clickable @click="editUnitStyle" :rightText="danweixz">
	  </uni-list-item>
	  <uni-list-item title="婚姻状态" showArrow clickable @click="editmarry" :rightText="huny">
	  </uni-list-item>
	  <uni-list-item title="手机号" showArrow clickable @click="editNickname('phone')" :rightText="userInfo.tel">
	  </uni-list-item>
	  <uni-list-item title="身份证号" showArrow clickable @click="editNickname('idCard')" :rightText="userInfo.idCard">
	  </uni-list-item>
	  <uni-list-item title="职业" showArrow clickable @click="editJob('job')">
	    <template #footer>
	      <view class="lext-ftsj" style="text-align: right;">
	        {{ userInfo.job }}
	      </view>
	    </template>
	  </uni-list-item>
      <uni-list-item title="简介" showArrow clickable @click="editNickname('briefIntro')" :rightText="userInfo.briefIntro">
        <template #footer>
          <view class="lext-ftsj" :style="{textAlign: userInfo.briefIntro.length > 20 ? '' : 'right' }">
            {{ userInfo.briefIntro }}
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <view class="preference">
      <view class="title">我的偏好</view>
      <view class="items">
		  <uni-tag text="绘画‌" type="primary" class="tag" :inverted="showshi['绘画']" @click="tagchange('绘画')"></uni-tag>
		  <uni-tag text="书法‌" type="primary" class="tag" :inverted="showshi['书法']" @click="tagchange('书法')"></uni-tag>
		  <uni-tag text="摄影" type="primary" class="tag" :inverted="showshi['摄影']" @click="tagchange('摄影')"></uni-tag>
		  <uni-tag text="瑜伽" type="primary" class="tag" :inverted="showshi['瑜伽']" @click="tagchange('瑜伽')"></uni-tag>		  
		  <uni-tag text="跑步" type="primary" class="tag" :inverted="showshi['跑步']" @click="tagchange('跑步')"></uni-tag>
		  <uni-tag text="游泳" type="primary" class="tag" :inverted="showshi['游泳']" @click="tagchange('游泳')"></uni-tag>
		  <uni-tag text="茶艺" type="primary" class="tag" :inverted="showshi['茶艺']" @click="tagchange('茶艺')"></uni-tag>
		  <uni-tag text="唱歌" type="primary" class="tag" :inverted="showshi['唱歌']" @click="tagchange('唱歌')"></uni-tag>		  
		  <uni-tag text="爬山" type="primary" class="tag" :inverted="showshi['爬山']" @click="tagchange('爬山')"></uni-tag>
		  <uni-tag text="阅读" type="primary" class="tag" :inverted="showshi['阅读']" @click="tagchange('阅读')"></uni-tag>
		  <uni-tag text="写作" type="primary" class="tag" :inverted="showshi['写作']" @click="tagchange('写作')"></uni-tag>
		  <uni-tag text="穿搭" type="primary" class="tag" :inverted="showshi['穿搭']" @click="tagchange('穿搭')"></uni-tag>		  
		  <uni-tag text="旅行" type="primary" class="tag" :inverted="showshi['旅行']" @click="tagchange('旅行')"></uni-tag>
		  <uni-tag text="徒步" type="primary" class="tag" :inverted="showshi['徒步']" @click="tagchange('徒步')"></uni-tag>
		  <uni-tag text="烘焙" type="primary" class="tag" :inverted="showshi['烘焙']" @click="tagchange('烘焙')"></uni-tag>
		  <uni-tag text="动漫" type="primary" class="tag" :inverted="showshi['动漫']" @click="tagchange('动漫')"></uni-tag>
      </view>
    </view>
    <view class="u-center" style="font-size: 13px; color: #999;margin-top: 20px;">
      ，<button type="primary" @click="baocun()">保存</button>
    </view>
    <canvas canvas-id="firstCanvas" id="canvasImg"></canvas>
    <uni-popup ref="popupInputName" type="bottom" :safe-area="false" background-color="#ffffff"  @maskClick="closeInputName">
      <view class="input-bg-user" style="flex-wrap:wrap">
        <template v-if="currentInputName === 'nickname'">
          <input v-model="inputValue" maxlength="15"
            placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
            class="input-b"
            placeholder="请输入昵称" />
        </template>
		<template v-if="currentInputName === 'job'">
		  <input v-model="inputValue" maxlength="15"
		    placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
		    class="input-b"
		    placeholder="请输入职业" />
		</template>
		<template v-if="currentInputName === 'phone'">
		  <input v-model="inputValue" maxlength="11"
		    placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
		    class="input-b"
		    placeholder="请输入手机号" />
		</template>
		<template v-if="currentInputName === 'unit'">
		  <input v-model="inputValue" maxlength="11"
		    placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
		    class="input-b"
		    placeholder="请输入工作单位" />
		</template>
		<template v-if="currentInputName === 'high'">
		  <input v-model="inputValue" maxlength="18"
		    placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
		    class="input-b"
		    placeholder="请输入身高(cm)" />
		</template>
		<template v-if="currentInputName === 'salary'">
		  <input v-model="inputValue" maxlength="18"
		    placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
		    class="input-b"
		    placeholder="请输入年收入(万)" />
		</template>
		<template v-if="currentInputName === 'home'">
		  <input v-model="inputValue" maxlength="11"
		    placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
		    class="input-b"
		    placeholder="请输入家乡" />
		</template>
		<template v-if="currentInputName === 'idCard'">
		  <input v-model="inputValue" maxlength="18"
		    placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
		    class="input-b"
		    placeholder="请输入身份证号" />
		</template>
        <template v-if="currentInputName === 'briefIntro'">
          <textarea v-model="inputValue" maxlength="300" auto-height
            placeholderStyle="color:#333333;font-size:13px;" trim :focus="autoFocus"
            class="input-b" style="line-height: 20px;"
            placeholder="简单介绍一下你自己吧~" />
            <view style="height: 378px;"></view>
        </template>
        <view class="btn-submit" @click="submitInput">确认</view>
      </view>
    </uni-popup>
    <uni-popup ref="popupSex" background-color="#fff" type="bottom">
      <view class="sex-box">
        <view style="border-bottom: 1rpx solid #eeeeee;" @click="submitSex(1)">男</view>
        <view @click="submitSex(2)">女</view>
      </view>
    </uni-popup>
	<uni-popup ref="popupmarry" background-color="#fff" type="bottom">
	  <view class="sex-box">
	    <view style="border-bottom: 1rpx solid #eeeeee;" @click="submitMarry(1)">未婚</view>
	    <view @click="submitMarry(2)">领证未办</view>
		 <view @click="submitMarry(3)">离异</view>
	  </view>
	</uni-popup>
	<uni-popup ref="popupUnit" background-color="#fff" type="bottom">
	  <view class="sex-box">
	    <view style="border-bottom: 1rpx solid #eeeeee;" @click="submitUnit(1)">企业</view>
	    <view @click="submitUnit(2)">国企</view>
		 <view @click="submitUnit(3)">体制内</view>
	  </view>
	</uni-popup>
	
	<uni-popup ref="popupStudy" background-color="#fff" type="bottom">
		  <view class="sex-box">
			<view style="border-bottom: 1rpx solid #eeeeee;" @click="submitStudy(1)">大专</view>
			<view @click="submitStudy(2)">本科</view>
			<view @click="submitStudy(3)">硕士</view>
			<view @click="submitStudy(4)">博士</view>
			<view @click="submitStudy(5)">未知</view>
		 </view>
	</uni-popup>
	

 

  </view>
</template>

<script>
	export default {
		data() {
			return {
				profileInfo:{},
				huny:"",
				redirectUrl:'',
				showshi:{
					'绘画':true,
					'烘焙':true,
					'书法':true,
					'摄影':true,
					'瑜伽':true,
					'跑步':true,
					'游泳':true,
					'茶艺':true,
					'唱歌':true,
					'爬山':true,
					'阅读':true,
					'写作':true,
					'穿搭':true,
					'旅行':true,
					'徒步':true,
					'烘焙':true,
					'动漫':true
				},
				userInfo:{
				},
				wxtag:[],
				xueli:"",
				danweixz:'',
				currentInputName:"",
				inputValue:"",
				autoFocus:false
			}
		},
		onLoad(options){
			this.redirectUrl = decodeURIComponent(options.redirect);
			uni.request({
				  url:  getApp().globalData.url +'heartwx/user/'+uni.getStorageSync('userId'),
				  method: 'get',
					success: (res) => {
					if (res.data.code === 200) {
						this.userInfo=res.data.data
						if(this.userInfo.briefIntro==null){
							this.userInfo.briefIntro=''
							this.submitUnit=this.userInfo.danweixz
							this.submitStudy=this.userInfo.study
							this.submitMarry= this.userInfo.marry
						}
					  }
					}
				});
		},
		methods: {
			baocun(){
				
				// if(this.userInfo.nickname==""||this.userInfo.nickname==null||this.userInfo.job==""||this.userInfo.job==null||this.userInfo.high==""||
				// this.userInfo.salary==""||this.userInfo.phone==""||this.userInfo.idCard==""
				// ||this.userInfo.danweixz==""||this.userInfo.study==""||this.userInfo.marry==""){
				// 	uni.showToast({
				// 	  title: '请完善部分资料',
				// 	  icon: 'none'
				// 	})
				// }else{
					uni.request({
						  url:  getApp().globalData.url +'heartwx/user',
						  method: 'put',
						  data: this.userInfo,
							success: (res) => {
							if (res.data.code === 200) {
								uni.reLaunch({ url: this.redirectUrl });
							  }
							}
						});
					// }	
			},
			tagchange(tag){
				this.$set(this.showshi, tag, !this.showshi[tag])
				if(this.wxtag.indexOf(tag)>-1){
					this.wxtag.splice(this.wxtag.indexOf(tag), 1); 
				}else{
					this.wxtag.push(tag)
				}
			console.log(this.wxtag)				
			},
			submitInput(){
				  if (this.currentInputName === 'nickname') {
					  if(this.inputValue){
						  this.userInfo.nickname=this.inputValue
						  this.$refs.popupInputName.close()
						  this.autoFocus = false
					  }else{
						  uni.showToast({
						    title: '昵称不能为空',
						    icon: 'none'
						  })
					  }
				  }else if(this.currentInputName === 'job'){
					  if(this.inputValue){
						  this.userInfo.job=this.inputValue
						  this.$refs.popupInputName.close()
						  this.autoFocus = false
					  }else{
						  uni.showToast({
							title: '职业不能为空',
							icon: 'none'
						  })
					  }
				  }else if(this.currentInputName === 'unit'){
					  if(this.inputValue){
						  this.userInfo.unit=this.inputValue
						  this.$refs.popupInputName.close()
						  this.autoFocus = false
					  }
				  }else if(this.currentInputName === 'high'){
					  if(this.inputValue){
						  this.userInfo.high=this.inputValue
						  this.$refs.popupInputName.close()
						  this.autoFocus = false
					  }else{nickname,job,sheng,
						  uni.showToast({
							title: '身高不能为空',
							icon: 'none'
						  })
					  }
				  }else if(this.currentInputName === 'salary'){
					  if(this.inputValue){
						  this.userInfo.salary=this.inputValue
						  this.$refs.popupInputName.close()
						  this.autoFocus = false
					  }else{
						  uni.showToast({
							title: '年薪不能为空',
							icon: 'none'
						  })
					  }
				  }else if(this.currentInputName === 'briefIntro'){
					  console.log(this.inputValue)
					  this.userInfo.briefIntro=this.inputValue
					  this.$refs.popupInputName.close()
					  this.autoFocus = false
				  }else if(this.currentInputName === 'home'){
					  this.userInfo.home=this.inputValue
					  this.$refs.popupInputName.close()
					  this.autoFocus = false
				  }else if(this.currentInputName === 'phone'){
					  if(this.inputValue){
						  this.userInfo.tel=this.inputValue
						  this.$refs.popupInputName.close()
						  this.autoFocus = false
						}else{
						  uni.showToast({
							title: '手机号不能为空',
							icon: 'none'
						  })
					  }
				  }else if(this.currentInputName === 'idCard'){
					  if(this.inputValue){
							if(!this.validateIDCard(this.inputValue)){
								 uni.showToast({
									title: '身份证输入错误',
									icon: 'none'
								 })
							}else{
								this.userInfo.idCard=this.inputValue
								this.$refs.popupInputName.close()
								this.autoFocus = false
							}
					}else{
						  uni.showToast({
							title: '身份证号不能为空',
							icon: 'none'
						  })
					  }
				  }
			},
			editNickname(value){
			  this.currentInputName = value
			  this.inputValue = ''
			  this.$refs.popupInputName.open()
			  this.autoFocus = true
			},
			
			editJob(value){
			  this.currentInputName = value
			  this.inputValue = ''
			  this.$refs.popupInputName.open()
			  this.autoFocus = true
			},
			editHome(value){
				 this.currentInputName = value
				  this.inputValue = ''
				  this.$refs.popupInputName.open()
				  this.autoFocus = true
			},
			editStudy(){
				this.$refs.popupStudy.open('center')
			},
			editSex() {
			   this.$refs.popupSex.open('center')
			},
			editUnitStyle() {
			   this.$refs.popupUnit.open('center')
			},
			editmarry() {
			   this.$refs.popupmarry.open('center')
			},
			submitUnit(value){
				if(value==1){
					this.danweixz="企业"
				}
				if(value==2){
					this.danweixz="国企"
				}
				if(value==3){
					this.danweixz="体制内"
				}
				this.userInfo.danweixz=value
				this.$refs.popupUnit.close()
			},
			submitStudy(value){
				this.userInfo.study=value
				if(value==1){
					this.xueli="大专"
				}
				if(value==2){
					this.xueli="本科"
				}
				if(value==3){
					this.xueli="硕士"
				}
				if(value==4){
					this.xueli="博士"
				}
				if(value==5){
					this.xueli="位置"
				}
				
				this.$refs.popupStudy.close()
			},
			submitSex(value){
				 this.userInfo.sex=value
			     this.$refs.popupSex.close()
			},
			submitMarry(value){
				 this.userInfo.marry=value
				 if(value==1){
				 	this.huny="未婚"
				 }
				 if(value==2){
				 	this.huny="领证未办"
				 }
				 if(value==3){
				 	this.huny="离异"
				 }
			     this.$refs.popupmarry.close()
			},
			
			validateIDCard(id) {
			  // 基本格式校验
			  if (!/^\d{17}[\dX]$/i.test(id)) return false;
			  

			
			  // 生日验证
			  const birthDate = id.substr(6, 8);
			  const year = parseInt(birthDate.substr(0,4));
			  const month = parseInt(birthDate.substr(4,2)) - 1; // JS月份从0开始
			  const day = parseInt(birthDate.substr(6,2));
			  const date = new Date(year, month, day);
			  
			  // 日期有效性检查
			  if (
			    date.getFullYear() !== year ||
			    date.getMonth() !== month ||
			    date.getDate() !== day
			  ) return false;
			
			  // 校验码计算
			  const weights = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2]; // 加权因子
			  const checkCodes = ['1','0','X','9','8','7','6','5','4','3','2']; // 校验码对应值
			  
			  let sum = 0;
			  for (let i = 0; i < 17; i++) {
			    sum += parseInt(id.charAt(i)) * weights[i];
			  }
			  
			  const expectedCode = checkCodes[sum % 11];
			  return id.charAt(17).toUpperCase() === expectedCode;
			}

			 }
		}
	
	
</script>

<style scoped lang="scss">
	.tag{
	  font-size: 24rpx;
	  line-height: 24rpx;
	  padding: 16rpx 13rpx;
	  color: #00aa00;
	  margin-right: 10rpx;
	  margin-bottom: 10rpx;
	  display: inline-block;
	}
	
	
.edit-data{
  padding: 40rpx;
}
.preference{
  border-top: 0.5px solid #f2f2f2;
  .title{
    color: #666666;
    font-size: 14px;
    margin: 30rpx 0;
  }

}
.input-bg-user{
  padding: 24rpx 30rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  .btn-submit{
    width: 124rpx;
    background: #EE751E;
    border-radius: 34rpx;
    color: #ffffff;
    font-size: 26rpx;
    line-height: 26rpx;
    padding: 20rpx 0;
    text-align: center;
    margin-left: 40rpx;
    align-self: flex-start;
  }
  .input-b{
    background-color: #eeeeee;
    border-radius: 18px;
    padding: 6px 10px;
    margin-bottom: 16px;
    flex: 1;
  }
}
.sex-box{
  line-height: 110rpx;
  text-align: center;
  margin: 0 30rpx;
}
.region-box{
  text-align: center;
  .title{
    line-height: 90rpx;
    background-color: #F2F2F2;
    display: flex;
    justify-content: space-between;
    color: #EE751E;
  }
  .picker-view{
    height: 500px;
    .item {
      line-height: 34px;
    }
  }
}
.background-list{
  padding: 30rpx 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .list-items{
    .item{
      display: flex;
      justify-content: space-between;
      margin: 0 auto 12rpx auto;
      width: 648rpx;
    }
    .grd-al{
      width: 318rpx;
      height: 280rpx;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
    }
    .tips{
      position: absolute;
      top: 16rpx;
      right: 24rpx;
      height: 38rpx;
      width: 38rpx;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom-b{
    font-size: 32rpx;
    line-height: 32rpx;
    padding: 26rpx 0;
    background: #999999;
    border-radius: 42rpx;
    margin: 20rpx 40rpx 0 40rpx;
    text-align: center;
    color: #ffffff;
  }
  .header-list-items{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .header-img{
      width: 108rpx;
      height: 108rpx;
      border-radius: 50%;
      margin: 0 27rpx 54rpx 27rpx;
    }
    .hes-hek{
      width: 162rpx;
      position: relative;
    }
    .tips {
      position: absolute;
      bottom: 54rpx;
      right: 27rpx;
      height: 38rpx;
      width: 38rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
#canvasImg {
  visibility: hidden;
  position: absolute;
  left: -100%;
  width: 203px;
  height: 239px;
}
.lext-ftsj{
  width: 58vw;
  font-size: 14px;
}
:deep(.input-bg-user .is-input-border){
  border-radius: 18px;
  background-color: #e5e5e5;
}
:deep(.user-edit .uni-list-item__content-title) {
  color: #666666;
  min-width: 24px;
}
:deep(.user-edit .uni-list-item__extra-text) {
  font-size: 14px;
  color: #333333;
}
:deep(.user-edit .uni-list-item__container) {
  padding: 16px 0;
}
:deep(.user-edit .uni-list-item--hover) {
  background-color: #ffffff;
}
</style>
